<template>
  <div class="outPapers">
    <div class="title">我的文章</div>
    <div class="content">
      <div class="leftContent">
        <div class="infor">
          <div class="avatar">
            <img src="/images/huag/hg8.jpg" alt="" />
          </div>
          <div class="name">影子</div>
          <div class="signature">海阔凭鱼跃，天高任鸟飞</div>
          <div class="summarize">
            <div class="sum_list">
              <div class="list_top">文章</div>
              <div class="list_bottom">15</div>
            </div>
            <div class="sum_list">
              <div class="list_top">分类</div>
              <div class="list_bottom">6</div>
            </div>
          </div>
        </div>
        <div class="classifi">
          <div class="cla_papers">
            <i class="iconfont icon-icon-book"></i>文章分类
          </div>
          <div class="cla_list">
            <div class="list">
              <div class="cla_name">学习</div>
              <div class="cla_num">34</div>
            </div>
            <div class="list">
              <div class="cla_name">生活</div>
              <div class="cla_num">15</div>
            </div>
            <div class="list">
              <div class="cla_name">读后感</div>
              <div class="cla_num">6</div>
            </div>
            <div class="list">
              <div class="cla_name">摄影</div>
              <div class="cla_num">7</div>
            </div>
            <div class="list">
              <div class="cla_name">音乐</div>
              <div class="cla_num">8</div>
            </div>
            <div class="list">
              <div class="cla_name">恋爱</div>
              <div class="cla_num">9</div>
            </div>
          </div>
        </div>
        <div class="webInfo">
          <div class="web_name"><i class="iconfont icon-Web"></i>网站资讯</div>
          <div class="run_time">
            <div class="run_name">已运行时间：</div>
            <div class="run_num">0天</div>
          </div>
          <div class="update">
            <div class="up_name">最后更新时间：</div>
            <div class="up_num">今天</div>
          </div>
        </div>
      </div>
      <div class="rightContent">
        <div class="soul" v-model="soul">
          <i class="iconfont icon-a-bianzu14"></i>{{ soul }}
        </div>
        <!-- 文章列表 -->
        <div
          class="papers"
          v-for="item in papers"
          @click="showContent"
          :key="item.id"
          :id="item.id"
        >
          <div class="paper">
            <img
              :src="item.paperImgUrl"
              alt=""
              class="alink"
              :data_hrefs="item.paperUrl"
            />
            <div class="text">
              <div class="paper_title" v-model="item.paperTitle">
                {{ item.paperTitle }}
              </div>
              <div class="paper_intro">
                {{ item.paperIntro }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- getPageNo是子向父传递参数时的自定义事件 -->
    <Pagination
      class="bottomPag"
      :pageNo="pageNo"
      :pageSize="pageSize"
      :total="total"
      :continues="3"
      @getPageNo="getPageNo"
    />
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "mypapers",
  data() {
    return {
      soul: "", //随机语录
      //第几页
      pageNo: 1,
      //每一页展示条数
      pageSize: 5,
    };
  },
  mounted() {
    // 发请求获取心灵鸡汤并嵌入页面
    axios
      .get("https://api.ixiaowai.cn/ylapi/index.php/?code=js")
      .then((response) => {
        this.soul = response.data.split('"')[1];
      });
    // 发请求，获取文章数据
    this.$store.dispatch("getPapers", this.pageNo);
  },

  methods: {
    //自定义事件的回调函数---获取当前第几页
    getPageNo(pageNo) {
      // 根据分页器子组件Pagination传回来的当前页数重新发请求，获取对应的文章数据
      // 必须要更新当前的页码，当前点击的页码数才会高亮显示
      this.pageNo = pageNo;
      this.$store.dispatch("getPapers", pageNo);
    },
    // 当点击文章时跳转到展示页面，事件代理
    showContent(e) {
      this.$router.push({name:'ShowPaper',params:{id:e.currentTarget.id}})
    },
  },
  computed: {
    ...mapState({
      papers: (state) => state.papers.papers,
      total: (state) => state.papers.total,
    }),
  },
};
</script>

<style lang="less" scoped>
.outPapers {
  width: 80vw;
  margin: 0 auto;
  margin-top: 60px;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 40px;
    margin-bottom: 50px;
  }
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    .leftContent {
      width: 17vw;
      margin-right: 20px;
      // background-color: #fff;
      .infor {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 42vh;
        border-radius: 20px;
        background-color: rgba(210, 244, 250, 0.2);
        .avatar {
          display: flex;
          justify-content: center;
          margin-top: -3vh;
          img {
            width: 15vh;
            height: 14vh;
            border-radius: 50%;
          }
        }
        .name {
          margin-top: 1vh;
          font-size: 2.5vh;
        }
        .signature {
          margin-top: 1vh;
          font-size: 2vh;
        }
        .summarize {
          display: flex;
          margin-top: 3vh;
          font-size: 2vh;
          .sum_list {
            width: 10vh;
            text-align: center;
          }
        }
      }
      .classifi {
        height: 40vh;
        border-radius: 20px;
        background-color: rgba(210, 244, 250, 0.2);
        margin-top: 10px;
        margin-bottom: 10px;
        .cla_papers {
          padding-left: 3vh;
          padding-top: 1.5vh;
          i {
            margin-right: 0.5vh;
            font-size: 2vh;
          }
        }
        .cla_list {
          padding: 0 2vh;
          .list {
            display: flex;
            align-items: center;
            padding: 0 1vh;
            margin-top: 1vh;
            height: 4vh;
            line-height: 4vh;
            border-radius: 10px;
            // 添加动画效果
            -webkit-animation-property: background-color, padding;
            -webkit-transition-duration: 0.3s, 0.3s;
            .cla_name {
              width: 10vh;
              float: left;
            }
            .cla_num {
              width: 7vh;
              float: right;
              padding-left: 12vh;
              text-align: center;
            }
          }
          .list:hover {
            padding: 0 2vh;
            border-radius: 10px;
            background-color: rgba(210, 244, 250, 0.8);
          }
        }
      }
      .webInfo {
        height: 26vh;
        border-radius: 20px;
        background-color: rgba(210, 244, 250, 0.2);
        .web_name {
          padding-left: 3vh;
          padding-top: 1.5vh;
          i {
            margin-right: 0.5vh;
            font-size: 2vh;
          }
        }
        .run_time,
        .update {
          display: flex;
          padding-left: 3vh;
          padding-top: 2.5vh;
        }
        .run_name,
        .up_name {
          width: 15vh;
          float: left;
        }
        .run_num,
        .up_num {
          width: 7vh;
          float: right;
          padding-left: 6vh;
          text-align: center;
        }
      }
    }
    .rightContent {
      width: 55vw;
      height: 110vh;
      .soul {
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        padding-right: 1.5vh;
        border-radius: 15px;
        font-size: 14px;
        background-color: rgba(210, 244, 250, 0.2);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        i {
          margin-right: 2vh;
        }
      }
      .papers {
        display: flex;
        .paper {
          display: flex;
          border-radius: 20px;
          background-color: rgba(210, 244, 250, 0.2);
          margin-top: 10px;
          img {
            width: 20vw;
            height: 20vh;
            border-radius: 15px;
            margin-right: 25px;
          }
          .text {
            width: 35vw;
            .paper_title {
              margin-left: 3vh;
              margin-right: 2vh;
              margin-top: 6vh;
              font-size: 3vh;
            }
            .paper_intro {
              margin-left: 6vh;
              margin-right: 2vh;
              margin-top: 2vh;
              font-size: 1.5vh;
            }
          }
        }
        .paper:hover {
          border-radius: 20px;
          background-color: rgba(210, 244, 250, 0.8);
        }
      }
    }
  }
  .bottomPag {
    margin-top: 3vh;
  }
}
</style>